<template>
	<div class="text-edit-container">
		<el-form :model="state.form">
			<el-form-item v-for="(item, index) in state.form.data" :key="index">
				<el-input v-model="item.textarea" :autosize="{ minRows: 2 }" type="textarea" placeholder="请输入要显示的文本" />
			</el-form-item>
			<comOption :data="state.form" :index="0" @change="actionChange"></comOption>
		</el-form>
		<el-button class="btn" @click="submit">
			<el-icon class="el-icon--right">
				<ArrowLeft />
			</el-icon>
			生成预览</el-button
		>
	</div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, watch } from 'vue';
import comOption from '/@/components/comOption/index.vue';

const emit = defineEmits(['submit']);

const props = defineProps({
	data: {
		type: Object,
		default: () => {},
	},
});

const state = reactive({
	form: [],
});

const actionChange = (actionData) => {
	state.form = {
		...state.form,
		...actionData.action,
	};

	handleSubmit();
};

watch(
	() => props.data,
	(val) => {
		if (val) {
			state.form.data = JSON.parse(JSON.stringify(props.data.data));
			if (state.form.data && state.form.data.length <= 0) {
				state.form.data.push({});
			}
		}
	}
);

onBeforeMount(() => {
	state.form.data = JSON.parse(JSON.stringify(props.data.data));

	if (state.form.data && state.form.data.length <= 0) {
		state.form.data.push({});
	}
});

// 提交
const submit = () => {
	handleSubmit();
};

function handleSubmit() {
	emit('submit', {
		type: 'text',
		data: state.form.data,
		actionDetail: state.form.actionDetail,
		actionType: state.form.actionType,
		miniPage: state.form.miniPage,
		index: props.data.index,
	});
}
</script>

<style lang="scss" scoped>
.text-edit-container {
	padding: 20px 12px;

	.btn {
		width: 100%;
		margin: 20px 0;
	}
}
</style>
